import React from 'react';
import {
  Row,
  Col,
  Modal,
  Button,
  Form,
  Input,
  Cascader,
  TimePicker,
  Checkbox,
} from 'antd';

class LiftingUpdateForm extends React.Component {
  onCancel = () => {
    const { handleUpdateModalVisible } = this.props;

    handleUpdateModalVisible(false);
  };

  handleUpdate = e => {
    e.preventDefault();

  };

  render() {
    const { form: { getFieldDecorator }, updateModalVisible, handleLifting } = this.props;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };

    const weeks = [
      { label: '周一', value: '周一' },
      { label: '周二', value: '周二' },
      { label: '周三', value: '周三' },
      { label: '周四', value: '周四' },
      { label: '周五', value: '周五' },
      { label: '周六', value: '周六' },
      { label: '周日', value: '周日' },
    ];

    return (
      <Modal
        width={ 800 }
        title='编辑自提点'
        visible={ updateModalVisible }
        onCancel={ this.onCancel }
        footer={ null }
      >
        <Form onSubmit={this.handleUpdate}>
          <Form.Item
            { ...formItemLayout }
            label='自提点名称'
          >
            {getFieldDecorator('name', {
              rules: [
                {
                  required: true,
                  message: '请输入自提点名称',
                },
              ],
            })(
              <Input placeholder='请填写便于理解的名称' autoComplete='off' />
            )}
          </Form.Item>
          <Form.Item
            { ...formItemLayout }
            label='自提点区域'
          >
            {getFieldDecorator('area', {
              rules: [
                {
                  required: true,
                  message: '请选择自提点区域',
                },
              ],
            })(
              <Cascader style={{ width: '100%' }} placeholder='请选择自提点区域' />
            )}
          </Form.Item>
          <Form.Item
            wrapperCol={{ xs: { span: 24 }, sm: { span: 16, offset: 4 } }}
          >
            {getFieldDecorator('address', {
              rules: [
                {
                  required: true,
                  message: '请输入详细地址',
                },
                {
                  min: 5,
                  max: 120,
                  message: '最短5个字，最长120字',
                },
              ],
            })(
              <Input placeholder='请选择自提点详细地址，最短5个字，最长120字' autoComplete='off' />
            )}
          </Form.Item>
          <Form.Item
            { ...formItemLayout }
            label='固定电话'
          >
            {getFieldDecorator('telephone', {
              rules: [
                {
                  required: true,
                  message: '请输入固定电话',
                },
              ],
            })(
              <Input.Group compact>
                <Input style={{ width: '20%' }} placeholder='区号' autoComplete='off' />
                <Input style={{ width: '80%' }} placeholder='请填写号码，便于买家联系' autoComplete='off' />
              </Input.Group>
            )}
          </Form.Item>
          <Form.Item
            wrapperCol={{ xs: { span: 24 }, sm: { span: 16, offset: 4 } }}
          >
            {getFieldDecorator('mobile', {
              rules: [
                {
                  required: true,
                  message: '请输入手机号码',
                },
              ],
            })(
              <Input style={{ width: '75%', marginRight: 10 }} placeholder='请输入手机号码' autoComplete='off' />
            )}
            <span style={{ color: '#1e88e5' }}>电话手机二选一</span>
          </Form.Item>
          <Row>
            <Col style={{ textAlign: 'right', color: '#333', height: 39, lineHeight: '39px' }} span={4}>
              <span style={{ color: '#f00' }}>*</span>自提时段：
            </Col>
            <Col span={16}>
              <Row>
                <Col span={7}>
                  <Form.Item>
                    {getFieldDecorator('startTime', {
                      rules: [
                        {
                          required: true,
                          message: '请选择开始时间',
                        },
                      ],
                    })(
                      <TimePicker style={{ width: '100%' }} placeholder='开始时间' format='HH:mm' />
                    )}
                  </Form.Item>
                </Col>
                <Col style={{ textAlign: 'center', color: '#333', height: 39, lineHeight: '39px' }} span={2}>
                  -
                </Col>
                <Col span={7}>
                  <Form.Item>
                    {getFieldDecorator('endTime', {
                      rules: [
                        {
                          required: true,
                          message: '请选择结束时间',
                        },
                      ],
                    })(
                      <TimePicker style={{ width: '100%' }} placeholder='结束时间' format='HH:mm' />
                    )}
                  </Form.Item>
                </Col>
              </Row>
            </Col>
          </Row>
          <Form.Item
            wrapperCol={{ xs: { span: 24 }, sm: { span: 16, offset: 4 } }}
          >
            {getFieldDecorator('weeks', {
              rules: [
                {
                  required: true,
                  message: '请选择星期',
                },
              ],
            })(
              <Checkbox.Group options={weeks} />
            )}
          </Form.Item>
          <Form.Item
            wrapperCol={{ xs: { span: 24 }, sm: { span: 16, offset: 4 } }}
          >
            <Button type='primary' htmlType='submit'>确定开启</Button>
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}

export default Form.create()(LiftingUpdateForm);
